<script type="text/javascript" language="javascript" src="./include/DataTables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="./include/DataTables/media/js/dataTables.tableTools.js"></script>
<script type="text/javascript" language="javascript" src="./include/DataTables/media/js/dataTables.colVis.js"></script>
<script type="text/javascript" language="javascript" src="./include/amCharts/amcharts.js"></script>
<script type="text/javascript" language="javascript" src="./include/amCharts/serial.js"></script>
<script type="text/javascript" language="javascript" src="./include/amCharts/exporting/amexport.js"></script>
<script type="text/javascript" language="javascript" src="./include/amCharts/exporting/canvg.js"></script>
<script type="text/javascript" language="javascript" src="./include/amCharts/exporting/rgbcolor.js"></script>
<script type="text/javascript" language="javascript" src="./include/amCharts/exporting/filesaver.js"></script>
<link rel="stylesheet" type="text/css" href="./include/DataTables/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="./include/DataTables/media/css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="./include/DataTables/media/css/dataTables.colVis.css">
<script type="text/javascript">
    AmCharts.makeChart("chartdiv",
            {
                "type": "serial",
                "pathToImages": "http://cdn.amcharts.com/lib/3/images/",
                "categoryField": "mes",
                "rotate": true,
                "angle": 30,
                "depth3D": 30,
                "sequencedAnimation": false,
                "categoryAxis": {
                    "gridPosition": "start"
                },
                "chartCursor": {},
                "trendLines": [],
                "graphs": [
                    {
                        "balloonText": "[[title]] de [[category]]:[[value]]",
                        "fillAlphas": 1,
                        "id": "AmGraph-1",
                        "title": "Pagos",
                        "type": "column",
                        "valueField": "valor"
                    }
                ],
                "guides": [],
                "valueAxes": [
                    {
                        "id": "ValueAxis-1",
                        "title": ""
                    }
                ],
                "allLabels": [],
                "amExport": {},
                "balloon": {},
                "titles": [
                    {
                        "id": "Title-1",
                        "size": 15,
                        "text": "Pagos pos Mes"
                    }
                ],
                "dataProvider": <{$resultJson}>
            }
    );</script>
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $('#transacciones').DataTable({
            dom: 'C T<"clear">lfrtip',
            "tableTools": {
                "sSwfPath": "./include/DataTables/media/swf/copy_csv_xls_pdf.swf",
                "aButtons": [
                    {
                        "sExtends": "collection",
                        "sButtonText": "Exportar",
                        "aButtons": [
                            {
                                "sExtends": "csv",
                                "sButtonText": "CSV",
                                "sToolTip": "Exportar Archivo Plano",
                                "sFileName": 'pagos.csv'
                            },
                            {
                                "sExtends": "xls",
                                "sButtonText": "Excel",
                                "sToolTip": "Exportar Excel",
                                "sFileName": 'pagos.xls'
                            }
                        ]
                    }
                ]
            },
            "aoColumnDefs": [
                {"bVisible": false, "aTargets": []}],
            "colVis": {
                "buttonText": "Ver/Ocultar Columnas",
                exclude: [0]
            },
            "oLanguage": {
                "sLengthMenu": "<div class='dataTables_info'><font size='3'>Mostrando _MENU_ registros por página</font></div>",
                "sZeroRecords": "No existe resultados",
                "sInfo": "<font size='3'><strong> _START_ - _END_ de _TOTAL_ registros</strong></font>",
                "sInfoEmpty": " 0 - 0 de 0 registros",
                "sInfoFiltered": "(Filtro de _MAX_ registros)",
                "sSearch": "<font size='3'>Filtrar:</font>",
                "oPaginate": {
                    "sNext": "<font size='3'>Siguiente</font>",
                    "sPrevious": "<font size='3'>Anterior</font>"
                }
            }
        });
    });
</script>

<div style="float:left; width: 550px;">
    <div class="block-title">
        Grafica
    </div>
    <div id="chartdiv" style="width: 100%; height: 600px; background-color: #FFFFFF;" ></div>
</div>
<div style="float:left; width: 400px;">
    <div id="tabs">
        <ul>
            <li>
                <a title="Pagos por Municipio" href="pagos-municipio.php" target="_self">Pagos por Municipio</a>
            </li>
            <li class="tab_active">
                <a title="Pagos por Mes" href="pagos-mes.php" target="_self">Pagos por Mes</a>
            </li>
        </ul>
    </div>
    <form action="" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td class="head">Año: </td>
                <td class="odd" style="white-space: nowrap;">
                    <select name="anio" id="anio" >
                        <option value="2012" <{if $anio eq "2012"}>selected<{/if}>>2012</option>
                        <option value="2013" <{if $anio eq "2013"}>selected<{/if}>>2013</option>
                        <option value="2014" <{if $anio eq "2014"}>selected<{/if}>>2014</option>
                        <option value="2015" <{if $anio eq "2015"}>selected<{/if}>>2015</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="head">Incluir Total: </td>
                <td class="odd" style="white-space: nowrap;">
                    <input type="checkbox" name="total" id="total" <{if $total eq "1"}>checked<{/if}>>
                </td>
            </tr>
            <tr>
                <td class="head"></td>
                <td class="odd" style="white-space: nowrap;">
                    <input type="submit" name="filtrarMes" id="filtrarMes" value="Filtrar">
                </td>
            </tr>
        </table>
    </form>
    <br>
    <div class="block-title">
        <{if $tabla eq "1"}>Resultados<{/if}>
        <{if $tabla eq "0"}>No se han encontrado transacciones<{/if}>
    </div>
    <{if $tabla eq "1"}>
    <table id="transacciones" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Mes</th>
                <th>Valor</th>
            </tr>
        </thead>
        <tbody>
            <{foreach item=data from=$result}>
            <tr>
                <td><{$data.mes}></td> 
                <td><{$data.valor}></td>
            </tr>
            <{/foreach}>
        </tbody>
    </table>
    <{/if}>
</div>

